<template>
  <section>
    <div class="content-title">{{title}}</div>
    <div class="search">
      <div class="input">
        <el-input v-model="keyword" placeholder="请输入内容" clearable></el-input>
      </div>
      <div class="box">
        <div @click="quickfun(0)">百度</div>
        <div @click="quickfun(1)">翻译</div>
        <div @click="quickfun(2)">AI</div>
      </div>
    </div>
  </section>
</template>
<script setup>
import { ref } from 'vue';
import system from '@/utils/system';
const keyword = ref('')
const props = defineProps({
  title: {
    type: String,
    defalut: ''
  }
})
const quickfun = (index) => {
  const hrefs = [
    'https://www.baidu.com/s?wd=',
    'https://fanyi.baidu.com/mtpe-individual/transText?lang=zh2en&query=',
    'https://chat.baidu.com/search?word=',
    'https://cn.bing.com/search?q=',
  ]
  system.openWeb(hrefs[index] + keyword.value)
}
</script>
<style scoped lang="scss">
$bg: rgba(13, 13, 13, 0.5);
$bg2: #1f2529;

.search {

  .input {
    background-color: $bg2;
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;

    :deep(.el-input) {
      height: 40px;
      border: none;

      .el-input__wrapper {
        background-color: $bg !important;
        border: none;
        box-shadow: none;
      }
    }
  }

  .box {
    display: flex;

    >div {
      width: 100px;
      height: 30px;
      background-color: $bg2;
      margin-right: 10px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
</style>
